$(function () {
  const layer = layui.layer;
  const form = layui.form;
  const laypage = layui.laypage;
  // 1.定义发起参数
  const data = {
    pagenum: 1, // 	页码值
    pagesize: 2, // 	每页显示多少条数据
    cate_id: "", // string
    state: "", //string
  };

  // 2.初始化渲染表格
  initTable();
  function initTable() {
    $.ajax({
      method: "GET",
      url: "/my/article/list",
      data,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);

        let htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);

        renderPage(res.total);
      },
    });
  }

  // 3.定义时间过滤器
  template.defaults.imports.FormDate = function (date) {
    const dt = new Date(date);

    let y = dt.getFullYear();
    let m = dateZero(dt.getMonth() + 1);
    let d = dateZero(dt.getDate());

    let hh = dateZero(dt.getHours());
    let mm = dateZero(dt.getMinutes());
    let ss = dateZero(dt.getSeconds());

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  };

  // 4.补零
  function dateZero(n) {
    return n > 9 ? n : "0" + n;
  }

  // 5.获取分类数据并渲染到下拉列表中
  initCate();
  function initCate() {
    $.ajax({
      mrthod: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);

        let htmlStr = template("tpl-cate", res);
        $("#cate_id").html(htmlStr);
        form.render("select");
      },
    });
  }

  // 6.筛选功能
  $("#form-search").on("submit", function (e) {
    e.preventDefault();

    const id = $("#cate_id").val();
    const state = $('[name="state"]').val();

    data.cate_id = id;
    data.state = state;
    initTable();
  });

  // 7.分页功能 定义分页函数
  function renderPage(total) {
    //执行一个laypage实例
    laypage.render({
      elem: "boxPage", //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit:data.pagesize,
      curr:data.pagenum,
      jump:function(obj,first){
        data.pagesize = obj.limit
        data.pagenum = obj.curr

        // 判断是不是第一次，如果是就不再执行下面多的代码
        // 因为initTable中调用来了renderpage函数，如果一起执行会导致进入死循环
        if(!first) {
          initTable()
        }
      },
      layout:['count','limit','prev','page','next','skip'],
      limits:[2,4,6,10,15]
    })
  }

  // 8.删除功能 通过事件委托
  $('tbody').on('click','.btn-del',function(){
    const id = $(this).attr('data-id')
    // const length = $('.btn-del').length
    // console.log(length)

    layer.confirm('确定要删除文章？', {icon: 3, title:'删除文章'}, function(index){
      $.ajax({
        method:'GET',
        url:`/my/article/delete/${id}`,
        success:function(res){
          if(res.status !== 0) return layer.msg(res.message)
          // 判断当前页码的数据数量是否小于1
            // 如果小于那么说明当前页码内只有一条数据
            // 那么就让当前页面 - 1
          data.pagenum = data.pagesize === 1 ? data.pagesize : data.pagesize - 1
          initTable()
        }
      })
      layer.close(index);
    })
  })
})
